<template>
  <ArmyPanelLayout class="barracksLeftOne" title="仓库信息">
    <template v-slot:subtitle>
      <div class="subtitle">
        <div class="subtitle--legend">
          <div class="subtitle--legend__item">
            <div class="icon one"></div>
            <div class="tips">撤防</div>
          </div>
          <div class="subtitle--legend__item">
            <div class="icon two"></div>
            <div class="tips">布防</div>
          </div>
        </div>
      </div>
    </template>
    <div class="barracksRightOne" v-if="tableData.length">

      <div class="barracksRightOne--wearhouse">
        <el-scrollbar height="390px">
          <div class="scoll-container">
            <div class="barracksRightOne--wearhouse__list">
              <div class="wearhouse" :class="{'warn': item.defenseStatus === 1}" v-for="(item, index) in tableData"
                   :key="item.houseName + index">
                <div class="wearhouse--info">
                  <div class="wearhouse--info__num" :title="item.houseName + '仓库'" v-if="false">{{ getHouseName(item.houseName) }}</div>
                  <div class="wearhouse--info__num" :title="item.houseName">{{ item.houseName }}</div>
                  <!--<div class="wearhouse&#45;&#45;info__name">仓库</div>-->
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div v-else class="empty" style="margin-top: 25%;">
      <DataEmptyTwo></DataEmptyTwo>
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {ElScrollbar} from 'element-plus'
import {houseInfo} from "@/api/armyScreenApi";
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import $bus from "@/util/bus";


onMounted(() => {
  houseInfoService()
  $bus.on('reRequest', houseInfoService)
})
onBeforeUnmount(() => {
  $bus.off('reRequest', houseInfoService)
})

const tableData = ref([])

function houseInfoService() {
  const paramObj = {
    // "lockerIndexCode": this.tabActive,
    // "pageNo": 1,
    // "pageSize": 20,
    // "timeScope": this.btnActive // 1-最近七天，2-最近一月，3-最近三月；默认七天,示例值(1)
  }
  houseInfo(paramObj).then(res => {
    tableData.value = res?.data?.list || [
      // {
      //   "defenseStatus": 1, // 	布防状态：1-布防；0-撤防
      //   "houseName": 1
      // },
    ]
  })
}

function getHouseName(originStr) {
  if (!originStr) {
    return '--'
  } else if (originStr.length <= 3) {
    return originStr + '号'
  } else if (originStr.length === 4) {
    return originStr
  } else {
    return originStr.substr(0, 3) + '...'
  }
}
</script>

<style lang="scss" scoped>
.subtitle {
  height: 40px;
  line-height: 40px;

  &--legend {
    display: flex;

    &__item {
      display: flex;
      margin-left: 32px;

      .icon {
        position: relative;
        top: 11px;

        &.one {
          width: 16px;
          height: 16px;
          background-image: linear-gradient(-4deg, #047AF1 0%, #01ABFD 83%);
          border-radius: 8px;
        }

        &.two {
          width: 16px;
          height: 16px;
          background: #F45151;
          border: 1px solid rgba(255, 255, 255, 0.5);
          border-radius: 8px;
        }
      }

      .tips {
        width: 30px;
        height: 20px;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0.58px;
        font-weight: 600;

        margin-left: 12px;
      }
    }
  }
}

.barracksRightOne {
  position: relative;

  &--wearhouse {
    padding: 24px 20px;

    .scoll-container {
      width: 392px;
      overflow-x: hidden;
    }

    &__list {
      width: 410px;
      overflow: hidden;

      .wearhouse {
        width: 64px;
        height: 110px;
        background-image: url('@/assets/images/armyScreen/仓库撤防@2x.png');
        background-size: cover;

        position: relative;

        float: left;
        margin-right: 18px;
        margin-bottom: 25px;

        &.warn {
          background-image: url('@/assets/images/armyScreen/仓库布防@2x.png');
        }

        &--info {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 10px;
          text-align: center;

          opacity: 0.9;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #D6E6FF;
          &__num{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
